<template>
  <!-- <div
    style=" display: flex;
  justify-content: space-between; margin-top: 200px;    margin-left: 220px;
    margin-right: 220px"
  >
    <a-card hoverable style="width: 240px;background:#FFD6C1">
      <img slot="cover" alt="example" src="@/icons/1.png" />
      <a-card-meta
        style="text-align:center; font-size: 28px"
        title="总浏览人数"
      >
        <template slot="description">
          <p style="color: red">{{ totalVisitCount }}</p>
        </template>
      </a-card-meta>
    </a-card>
    <a-card hoverable style="width: 240px;background:#B3FFFF">
      <img slot="cover" alt="example" src="@/icons/2.png" />
      <a-card-meta
        style="text-align: center; font-size: 28px"
        title="今日浏览人数"
      >
        <template slot="description">
          {{ dayVisit }}
        </template>
      </a-card-meta>
    </a-card>
    <a-card hoverable style="width: 240px;background:#CCFFCC">
      <img slot="cover" alt="example" src="@/icons/3.png" />
      <a-card-meta style="text-align: center; font-size: 28px" title="用户数量">
        <template slot="description">
          <p style="color: #008000">{{ userCount }}</p>
        </template>
      </a-card-meta>
    </a-card>
  </div> -->
  <div class="Echarts">
    <div id="main" style="width: 1200px;height:900px;"></div>
    <!-- <div id="main2" style="width: 600px;height:550px;"></div> -->
  </div>
</template>
<script>
import * as echarts from "echarts";
import api from "@/api/api.js";
import UploadImg from "../../components/uploadImg.vue";
import { quillEditor } from "vue-quill-editor";
import { quillRedefine } from "vue-quill-editor-upload";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
export default {
  components: {
    UploadImg
  },
  data() {
    return {
      visibleDetails: false,
      dataTable: [],
      totalVisitCount: "",
      userCount: "",
      dayVisit: "",

      name: "Echarts"
    };
  },
  methods: {
    myEcharts() {
      var date = new Date();
      var seperator1 = "-";
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var strDate = date.getDate();
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
      }
      var currentdate = year + seperator1 + month + seperator1 + strDate;
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(document.getElementById("main"));
      // 指定图表的配置项和数据
      var option = {
        color: [
          "#45C2E0",
          // "#C1EBDD",
          "#FFC851",
          // "#5A5476",
          // "#1869A0"
          "#FF9393"
        ],
        title: {
          text: "大湾区GoGBA小程序数据统计",
          subtext: "截止至" + currentdate,
          left: "center"
        },
        tooltip: {
          trigger: "item"
        },
        legend: {
          orient: "vertical",
          left: "left"
        },
        series: [
          {
            name: "数据统计",
            type: "pie",
            radius: "50%",
            data: [
              { value: this.totalVisitCount, name: "总浏览人数" },
              { value: this.dayVisit, name: "今日浏览人数" },
              { value: this.userCount, name: "用户数量" }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            },
            labelLine: {
              //提示线
              normal: {
                lineStyle: {
                  color: "#5A5476"
                },
                smooth: 0.2,
                length: 10,
                length2: 20
              }
            }
          }
        ]
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    myEcharts2() {
      // 基于准备好的dom，初始化echarts实例
      var myChart2 = this.$echarts.init(document.getElementById("main2"));
      // 指定图表的配置项和数据
      var option = {
        title: {
          text: "大湾区GoGBA小程序数据统计",
          subtext: "数据来自大湾区GoGBA小程序"
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow"
          }
        },
        legend: {
          data: ["总浏览人数", "今日浏览人数", "用户数量"]
        },
        grid: {
          left: "5%",
          right: "4%",
          bottom: "10%",
          containLabel: true
        },
        xAxis: {
          type: "value",
          boundaryGap: [0, 0.01]
        },
        yAxis: {
          type: "category",
          data: [""]
        },
        series: [
          {
            name: "总浏览人数",
            type: "bar",
            data: [35]
          },
          {
            name: "今日浏览人数",
            type: "bar",
            data: [20]
          },
          {
            name: "用户数量",
            type: "bar",
            data: [79]
          }
        ]
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart2.setOption(option);
    },
    getPlan() {
      api.getIndex().then(res => {
        if (res.code == 200) {
          this.totalVisitCount = res.result.totalVisitCount;
          this.userCount = res.result.userCount;
          this.dayVisit = res.result.dayVisit;
          this.myEcharts();
          // this.myEcharts2();
        }
      });
    }
  },
  created() {
    this.getPlan();
  },
  mounted() {
    // this.getPlan();
    // this.myEcharts();
  }
};
</script>

<style lang="scss" scoped="" type="text/css">
.Echarts {
  display: flex;
  justify-content: space-between;
}
.editable-row-operations a {
  margin-right: 8px;
}
.top-btn {
  padding: 10px;
}
.code-img {
  display: block;
  width: 150px;
}
.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}
</style>
